/**
 * Author:seebin
 * 
 * 快速生成页面或组件的脚本
 * 
 * 使用方法:
 * 生成页面
 *   npm run view test
 * 生成组件
 *   npm run com test
 * 
 * 支持多级目录生成
 *   npm run view test/detail
 * 
 * 备注:
 *   最后一个目录名字将会作为相关文件的名字, 只需要关注目录即可, 不需要关注文件名,不过我们建议将复词文件名以中划线分割,
 *   比如: npm run view member/member-list
 */

const fs = require('fs');
const basePath = 'src';

// 要创建的类型
const fileType = process.argv[2];

// 要创建的文件路径
let pathInput = process.argv[3];
if (!pathInput) {
  console.log('未指定文件名\n创建页面请执行:npm run view <目录>\n创建组件请执行:npm run com <目录>')
  process.exit(0)
}

// 生成文件
var initFile = function (mulu, content) {
  var muluAtr = mulu.split("/");
  muluAtr.forEach(function (value, i) {
    i++;
    if (i == muluAtr.length) {
      if (!!value.match(/\./g)) {
        if (!!fs.existsSync(mulu)) {
          return;
        } else {
          if (fs.writeFileSync(mulu, content, 'utf8')) {
            return console.log("File creation failed for " + mulu);
          } else {
            return console.log("成功生成文件：" + mulu);
          }
        }
      }
    }
    var munstr = muluAtr.slice(0, i).join("/");
    if (!!fs.existsSync(munstr)) {
      return;
    } else {
      fs.mkdirSync(munstr);
    }
  });
};

const dirArray = pathInput.split("/");
// 文件名
const fileName = dirArray[dirArray.length - 1];

// 将目录作为文件名
pathInput += '/' + fileName

let className = '';
if (fileName.indexOf('-') > 0) {
  // 文件名包含-
  let nameArray = fileName.split('-');
  nameArray.forEach((item) => {
    className += item.replace(item[0], item[0].toUpperCase());
  })
} else if (fileName.indexOf('-') > 0) {
  // 文件名包含_
  let nameArray = fileName.split('_');
  nameArray.forEach((item) => {
    className += item.replace(item[0], item[0].toUpperCase());
  })
} else {
  className = fileName.replace(fileName[0], fileName[0].toUpperCase());
}

// vue template
const viewTemplate = `<!-- ${className} page -->
<template>
  <div>
  {{title}} page
  </div>
</template>

<script lang="ts" src="./${fileName}.ts"></script>

<style lang="scss">
@import "./${fileName}.scss";
</style>
`;

// vue typescript
const viewTs = `// ------login page
import { Component, Vue } from "vue-property-decorator"
import Http, { Api } from "@/request";
import { Action, Getter } from "vuex-class";
import { ${className}State } from "@/store/module/${fileType}/${fileName}/${fileName}.interface";

@Component({
  components: {}
})
export default class ${className} extends Vue {

  private title: string = '${className}'

  private created() {

  }
}
`;

// vue scss
const viewScss = `/**${className} scss**/
`;

// vue store interface
const viewInterface = `export interface ${className}State {
  [key: string]: any;
}`;

// vue store module
const viewModule = `// ------${className} module
import { GetterTree, MutationTree, ActionTree } from 'vuex'
import Http, { Api } from "@/request";
import { ${className}State } from "./${fileName}.interface"

const state: ${className}State = {
  username: ''
}

// 强制使用getter获取state
const getters: GetterTree<${className}State, any> = {
  username(states): string {
    return states.username
  }
}

// 更改state
const mutations: MutationTree<${className}State> = {
  // 更新state都用该方法
  UPDATE_STATE(states: any, payload: ${className}State) {
    states.username = payload.username;
  }
}

const actions: ActionTree<${className}State, any> = {
  UPDATE_STATE_ASYN({ commit }, data: string) {
    commit('UPDATE_STATE', {
      username: data
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}`;

// view path
const vuePath = `${basePath}/${fileType}/${pathInput}.vue`;
const tsPath = `${basePath}/${fileType}/${pathInput}.ts`
const scssPath = `${basePath}/${fileType}/${pathInput}.scss`
// const modulePath = `${basePath}/store/module/${fileType}/${pathInput}.ts`
// const interfacePath = `${basePath}/store/module/${fileType}/${pathInput}.interface.ts`

// 生成
initFile(vuePath, viewTemplate);
initFile(tsPath, viewTs);
initFile(scssPath, viewScss);
// initFile(modulePath, viewModule);
// initFile(interfacePath, viewInterface);



